<template>
    <div class="deposit_bar">
        <img src="/assets/images/deposit1.png" alt="" />
        <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
    </div>
    <div class="deposit_bar_large">
        <img src="/assets/images/deposit2.png" alt="" />
        <div class="deposit_bar_large__title">
            <span>账户余额：￥ {{ business.money }}</span>
        </div>
    </div>
    <div class="deposit_bar_large">
        <img src="/assets/images/deposit2.png" alt="" />
        <div class="deposit_bar_large__title">
            <span>用户：{{ business.nickname }}</span>
        </div>
    </div>

    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>

    <van-form class="form" @submit="OnPay">
        <van-field
            v-model="money"
            label="充值金额"
            name="money"
            placeholder="请填写充值金额"
            left-icon="gold-coin-o"
            required
            :rules="[{ required: true, message: '请填写充值金额' }]"
            @focus="NumberKeyboardShow = true"
        />

        <!-- 充值选项 -->
        <van-field
            v-model="pay.text"
            is-link
            readonly
            required
            name="pay"
            label="支付方式"
            placeholder="选择支付方式"
            left-icon="other-pay"
            @click="PayShow = true"
        />

        <van-popup
            v-model:show="PayShow"
            position="bottom"
            round
        >
            <van-picker
                :columns="PayList"
                @confirm="OnPayConfirm"
                @cancel="PayShow = false"
            />
        </van-popup>

        <div class="button">
            <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                native-type="submit">立即充值</van-button>
        </div>
    </van-form>

    <!-- 数字键盘 -->
    <van-number-keyboard
        @input="PayInput"
        @delete="PayDel"
        :show="NumberKeyboardShow"
        close-button-text="完成"
        @close="NumberKeyboardShow = false"
    />

    <Tabbar />
</template>

<script setup>

    const {proxy} = getCurrentInstance()

    let business = proxy.$business
    let money = ref('')
    let NumberKeyboardShow = ref(false)

    //充值选项
    const PayShow = ref(false);
    const PayList = ref([
        {text:'支付宝',value:'zfb'},
        {text:'微信',value:'wx'}
    ]);
    const pay = ref(PayList.value[0]);

    const PayInput = (values) => (money.value += values);
    const PayDel = () => money.value = money.value.slice(0, -1)

    const OnPayConfirm = ({selectedOptions}) =>
    {
        PayShow.value = false

        let option = selectedOptions[0] ?? '';

        if(!option) return false
        
        pay.value = option
    } 

    //立即充值
    const OnPay = () =>
    {
        if(!money.value.trim())
        {
            return false;
        }

        NumberKeyboardShow.value = false;

        proxy.$confirm({
            title: '充值',
            message:`是否确认充值 ${money.value} 元到该账户？`
        }).then(async () => {
            let params = {
                busid:business.value.id,
                money:money.value.trim(),
                type:pay.value.value
            }

            let result = await proxy.$POST({
                url:'/business/pay',
                params
            })

            if(result.code == 0)
            {
                proxy.$fail(result.msg)
                return false
            }

            // 跳转收银台
            proxy.$router.push({path:'/business/cashier',query:{payid:result.data.id}});

        }).catch(err => {})
    }








</script>

<style scoped>
    @import url('/assets/css/BusinessPay.css');
</style>